import React, { useEffect, useState } from 'react';
import { Row, Col } from 'antd'
import QuestionForm from './components/QuestionForm';
import FormCenter from './components/FormCenter'
import Setting from './components/Setting';
import arrayMove from 'array-move'
import './index.less'
const WpsForm = (props) => {
    const { dataList, setDataList, } = props

    const [selectIndex, setSelectIndex] = useState(null)
    let element = null
    const setIndex = (id) => {
        if (id == 0 || id === 'dragbox') {
            return
        }
        let flag = false
        setSelectIndex((e) => {
            if (e == id) {
                return e
            }
            else {
                setDataList((list) => {
                    if (!flag) {
                        flag = true
                        return arrayMove(list, e, id)
                    }
                    return list
                })
                return Number(id)
            }

        })
    }
    console.log(selectIndex)
    useEffect(() => {
        const list = document.getElementById('dragbox');
        list.addEventListener('dragstart', handleDragStart);
        list.addEventListener('dragover', handleDragOver);
        list.addEventListener('drop', handleDrop);
        return () => {
            list.removeEventListener('dragstart', handleDragStart);
            list.removeEventListener('dragover', handleDragOver);
            list.removeEventListener('drop', handleDrop);
        }
    }, [])
    function handleDragStart(e) {
        // 设置拖拽的数据类型和值  
        element = e.target.parentNode
        element.style.opacity = 0.2;
        element.style.border = '1px solid #333333';
        e.dataTransfer.setData('text/plain', '');
        // // 保存拖拽元素的引用  
        // console.log(e)
    }

    // 当拖拽元素在目标元素上方时触发  
    function handleDragOver(e) {
        if (e.preventDefault) {
            e.preventDefault(); // 阻止默认行为，允许放置  
        }
        return false;
    }

    // 当拖拽元素被放置到目标元素时触发  
    function handleDrop(e) {
        if (e.stopPropagation) {
            e.stopPropagation(); // 阻止事件冒泡  
        }
        element.style.opacity = 1;
        element.style.border = 'none';
        console.log('执行了拖拽')
        // 获取拖拽元素和目标元素  
        const list = document.getElementById('dragbox');
        if (!e.target.getAttribute('id')) {
            if (!e.target.parentNode.getAttribute('id')) {
                if (!e.target.parentNode.parentNode.getAttribute('id')) {
                    if (!e.target.parentNode.parentNode.parentNode.getAttribute('id')) {
                        if (!e.target.parentNode.parentNode.parentNode.parentNode.getAttribute('id')) {
                            if (!e.target.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute('id')) {
                            }
                            else {
                                setIndex(e.target.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute('id'))
                            }
                        }
                        else {
                            setIndex(e.target.parentNode.parentNode.parentNode.parentNode.getAttribute('id'))
                        }
                    }
                    else {
                        setIndex(e.target.parentNode.parentNode.parentNode.getAttribute('id'))
                    }
                }
                else {
                    setIndex(e.target.parentNode.parentNode.getAttribute('id'))
                }
            }

            else {
                setIndex(e.target.parentNode.getAttribute('id'))
            }
        }
        else {

            setIndex(e.target.getAttribute('id'))
        }
        // 如果目标元素不是列表项，则退出  
        // if (dragSrcEl !== e.target && e.target.nodeName === 'LI') {
        //     // 交换拖拽元素和目标元素的位置  
        //     e.target.innerHTML = dragSrcEl.innerHTML;
        //     dragSrcEl.innerHTML = dropHTML;

        //     // 移除拖拽元素的样式  
        //     dragSrcEl.classList.remove('dragging');
        // }

        return false;
    }

    const changeDataList = ({ changeType, data = {}, index, list = [] }) => {
        if (changeType === 'add') {
            setSelectIndex(() => {
                if (selectIndex === null) {
                    setDataList([...dataList, data])
                } else {
                    setDataList(() => {
                        return dataList.reduce((list, item, o) => {
                            if (o == selectIndex) {
                                return [...list, item, data]
                            } else {
                                return [...list, item]
                            }
                        }, [])
                    })
                }

                return selectIndex === null ? 0 : selectIndex + 1
            })

        } else if (changeType === 'select') {
            setSelectIndex(index)
        } else if (changeType === 'update') {
            setDataList(dataList.map((item, s) => {
                if (s === index) {
                    return {
                        ...item,
                        ...data
                    }
                }
                else {
                    return item
                }

            }))
        } else if (changeType === 'delete') {
            setSelectIndex((e) => {
                const list = dataList.filter((item, s) => {
                    return selectIndex != s
                })
                setDataList(list)
                if (e > 0 && list.length > 0) {
                    return e - 1
                } else if (e == 0 && list.length > 0) {
                    return 0
                } else {
                    return null
                }

            })

        }
        else if (changeType === 'coby') {
            setSelectIndex(() => {
                setDataList(() => {
                    return dataList.reduce((list, item, o) => {
                        if (o == selectIndex) {
                            return [...list, item, data]
                        } else {
                            return [...list, item]
                        }
                    }, [])
                })

                return selectIndex + 1
            })
        } else if (changeType === 'all') {
            setDataList(list)
        }

    }
    return <div style={{ width: "100%", height: '100%' }}>
        <Row style={{ width: "100%", height: '100%', overflow: 'hidden' }} gutter={[20, 120]}>
            <Col className='WpsForm_scroll_box' style={{ background: "#ffffff", overflowY: 'scroll', paddingTop: 24 }} span={6} >
                <QuestionForm onChange={changeDataList}></QuestionForm>
            </Col>
            <Col id='dragbox'
                className='WpsForm_scroll_box' style={{ background: "#ffffff", overflowY: 'scroll' }} offset={1} span={12}>
                <FormCenter selectIndex={selectIndex} onChange={changeDataList} list={dataList}></FormCenter>
            </Col>
            <Col style={{ paddingTop: 24 }} push={1} span={4}>
                <Setting selectIndex={selectIndex} list={dataList} data={dataList[selectIndex]} onChange={changeDataList}></Setting>
            </Col>
        </Row>
    </div >
}
export default WpsForm